<template>
  <div v-if="infoData && infoData.news_item && infoData.news_item[0] && infoData.news_item[0].title" class="info-wrap">
    <div class="title">
      {{infoData.news_item[0].title}}
    </div>
    <div class="author-wrap">
      <div>作者：{{infoData.news_item[0].author}}</div>
      <div>{{fmtTimeStamp(infoData.update_time)}}</div>
    </div>
    <div class="content" v-html="infoData.news_item[0].content"></div>
    <div class="footer-wrap">
      <div class="footer-btn-item" @click="handleArticleLikes">
        <img v-if="!isLike" src="https://www.thuguardian.com/files/small_program/icon-like.png" alt="">
        <img v-else src="https://www.thuguardian.com/files/small_program/icon-like-active.png" alt="">
      </div>
      <div class="footer-btn-item" @click="handleArticleCollect">
        <img v-if="!isCollect" src="https://www.thuguardian.com/files/small_program/icon-collect.png" alt="">
        <img v-else src="https://www.thuguardian.com/files/small_program/icon-collect-active.png" alt="">
      </div>
      <div class="back-btn" @click="handleBack">返回</div>
    </div>
  </div>
</template>

<script>
import { infoDetail, articleLikes, articleCollect, articleShare } from '@/api/article-info/index.js'
import { fmtTimeStamp } from '@/utils/index'

export default {
  data() {
    return {
      articleId: '',
      infoData: {},
      fmtTimeStamp,
      isCollect: false,
      isLike: false
    }
  },
  onLoad(options) {
    if (options.articleId) {
      this.articleId = options.articleId
    }
    this.getInfoDetail()
  },
  methods: {
    async getInfoDetail() {
      const res = await infoDetail({
        article_id: this.articleId
      })

      this.infoData = res.data
      this.isCollect = res.is_collect
      this.isLike = res.is_like
    },
    async handleArticleLikes() {
      const res = await articleLikes({
        article_id: this.articleId
      })
      if (res.code == 200) {
        this.isLike = true
        uni.showToast({ title: '点赞成功', icon: 'success' })
      } else {
        uni.showToast({ title: res.msg, icon: 'none' })
      }

    },
    async handleArticleCollect() {
      const res = await articleCollect({
        article_id: this.articleId
      })

      if (res.code == 200) {
        this.isCollect = true
        uni.showToast({ title: '收藏成功', icon: 'success' })
      } else {
        uni.showToast({ title: res.msg, icon: 'none' })
      }

    },
    async handleShareNum() {
      const res = await articleShare({
        article_id: this.articleId
      })
    },
    handleBack() {
      wx.navigateBack({
        delta: 1
      })
    }
  },
  onShareAppMessage: function (res) {
    console.log(res, '开始分享了 -=-=-')
    this.handleShareNum()
    return {
      title: '清心守护',
      path: '/pages/article-info/main',
      success: (res) => {
        // 分享成功
        console.log("分享成功:", res);
      },
      fail: (res) => {
        // 分享失败
        console.log("分享失败:", res);
      }
    }
  },
}
</script>

<style lang="less" scoped>
.author-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.info-wrap {
  position: relative;
  padding: 20px 20px 110px;

  .footer-wrap {
    position: fixed;
    padding: 20px 20px 40px;
    bottom: 0;
    left: 0;
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    background: #fff;

    .back-btn {
      width: 145px;
      height: 48px;
      border-radius: 48px;
      color: #fff;
      background: #00AFCB;
      text-align: center;
      line-height: 48px;
    }

    .footer-btn-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 70px;
      height: 48px;
      border-radius: 48px;
      color: #fff;
      text-align: center;
      line-height: 48px;
      background: #E2FBFF;
    }
    .footer-btn-item img {
      display: block;
      width: 40px;
      height: 40px;
    }
    .footer-btn-item.active {
      background: #00AFCB;
    }
  }
  .title {
    font-size: 20px;
  }

  .author-wrap {
    font-size: 16px;
    margin-top: 20px;
  }

  .content {
    margin-top: 20px;
  }
}
</style>